/*
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-08-11 09:36:34
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-08-17 15:00:40
 * @FilePath: \bpm-management-system\src\component\examinemanage\Chaosonggeiwodeshenpi.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Avatar,Form, Input,Select,Table,Switch, Button ,Checkbox} from 'antd';
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import '../../examinemanage/bianji.less';


const CustomizedForm = (propos) => {
  const add=()=>{
      console.log(propos);
      propos.visibles[1](!propos.visibles[0])
      console.log(propos.visibles[0]);
    // console.log('add');
    // props.visibles()
  }
  
  return(
  <Form name="global_state" className='CSGWDbianji'>
    {/* 第一个框 */}
    <Form.Item name="username" label="付款金额"
      rules={[
        {
          required: true,
          message: 'Username is required!',
        },
      ]}
    >
      <Input />
    </Form.Item>
    {/* 第二个框 */}
    <Form.Item
        name="gender"
        label="材料采购合同"
        rules={[{ required: true, }]}>
        <Select allowClear></Select>
    </Form.Item>
    {/* 第三个框 */}
    <Form.Item
        name="gender"
        label="关联项目" disabled="true">
        <Select allowClear></Select>
    </Form.Item>
    {/* 第四个框 */}
    <Form.Item
        name="gender"
        label="拟付款金额"
        rules={[{ required: true, }]}>
        <Select allowClear></Select>
    </Form.Item>
    {/* 第五个框 */}
    <Form.Item
        name="gender"
        label="付款金额"
        rules={[{ required: true, }]}>
        <Select allowClear></Select>
    </Form.Item>
    {/* 第6个框 */}
    <Form.Item
        name="gender"
        label="收款账户"
        rules={[{ required: true, }]}>
        <Table
          columns={ShoukuanTable}
          dataSource={ShoukuanArr}
          // scroll={{ x: 1300}}
          pagination={false}
          className="LilTable"
        />
    </Form.Item>
    {/* 多行文本框 */}
    <Form.Item
        name="gender"
        label="合同付款备注"
        rules={[{ required: true, }]}>
        <Input.TextArea rows={(6)} />
    </Form.Item>
     {/* 开关 */}
     <Form.Item
        name="gender"
        label="是否紧急"
        rules={[{ required: true, }]}>
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
    </Form.Item>
     {/* 上传审批单 */}
     <Form.Item
        name="gender"
        label="项目审批单"
        rules={[{ required: true, }]}>
        <Button type='primary'>+ 点击上传</Button>
        <p className='fontP'>文件格式为Word、Excel、PDF、JPG、PNG、ZIP等大小不超过10M</p>
    </Form.Item>
    {/* 产值确认单 */}
    <Form.Item
        name="gender"
        label="产值确认单"
        rules={[{ required: true, }]}>
        <Button type='primary'>+ 点击上传</Button>
        <p className='fontP'>文件格式为Word、Excel、PDF、JPG、PNG、ZIP等大小不超过10M</p>
    </Form.Item>
    {/* 审批人 */}
    <Form.Item
        name="gender"
        label="产值确认单"
        rules={[{ required: true, }]}>
          <Avatar className='spanDiv' shape="square" size={64} icon={<UserOutlined />} />
          <span>&gt;</span>
          <Avatar className='spanDiv' shape="square" size={64} icon={<UserOutlined />} />
          <Avatar className='spanDiv' shape="square" size={64} icon={<UserOutlined />} />
        {/* <Image src="@/assets/images/headerimg.png" className='spanDiv'/>
        <span>&gt;</span> 
        <Image className='spanDiv'/> &nbsp; 
        <Image className='spanDiv'> + </Image> */}
    </Form.Item>
     {/* 抄送人 */}
     <Form.Item
        name="gender"
        label="抄送人"
        rules={[{ required: true, }]}>
        <Avatar className='spanDiv' shape="square" size={64} icon={<UserOutlined />} />
    </Form.Item>
    <div className='lastForm'>
        <Button type='primary' className='footBut' centered>保存为草稿</Button>
        <Button type='primary' className='footBut' centered>提交审核</Button>
        <Button type='info' className='footBut' onClick={add} centered>取消</Button>
    </div>
  </Form>

)};




const onChange = (e) => {
  console.log(`checked = ${e.target.checked}`);
};
const ShoukuanTable = [
  {
    title: '序号',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
  },
  {
    title: '户名',
    width: 100,
    dataIndex: 'age',
    key: 'age',
    fixed: 'left',
  },
  {
    title: '开户行',
    dataIndex: 'address',
    key: '1',
  },
  {
    title: '账户',
    dataIndex: 'address',
    key: '2',
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
    render: () => <Checkbox onChange={onChange}></Checkbox>
  },
];
const ShoukuanArr = [
  {
    key: '1',
    name: '我说你',
    age: 32,
    address: 'New York Park',
  },{
    key: '2',
    name: 'Jim',
    age: 40,
    address: 'London Park',
  },{
    key: '3',
    name: '阿尼亚',
    age: 40,
    address: 'London Park',
  },
];
sessionStorage.setItem("ShoukuanArr",JSON.stringify(ShoukuanArr))

const CailiaofukuanBianji = (propos) => {
  
  return (
    <>
      <CustomizedForm propos={propos}/>
    </>
  );
};

export default CailiaofukuanBianji;